<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <div class="alitem" @click="backChange">
          <el-icon size="24" style="cursor: pointer">
            <ArrowLeftBold />
          </el-icon>
          <span style="cursor: pointer">高考头条管理</span>
        </div>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="标题" prop="title" class="margintop mb20">
        <el-input v-model="ruleForm.title" />
      </el-form-item>
      <el-form-item label="来源" prop="source" class="margintop mb20">
        <el-input v-model="ruleForm.source" />
      </el-form-item>
      <el-form-item label="类型" prop="type_name" class="margintop mb20">
        <el-input v-model="ruleForm.type_name" />
      </el-form-item>
      <el-form-item label="关键词" prop="keywords" class="margintop mb20">
        <el-input v-model="ruleForm.keywords" />
      </el-form-item>
      <el-form-item label="内容" prop="content" class="margintop mb20">
        <UEditorPlus
          :id="id1"
          v-model="ruleForm.content"
          @update:modelValue="editorChange"
        />
      </el-form-item>
      <el-form-item label="封面图片" prop="image_url" class="margintop mb20">
        <ImageUpload
          :limit="1"
          :height="400"
          :modelValue="modelValueList"
          @update:modelValue="modelValue"
        />
      </el-form-item>
      <div style="display: flex; justify-content: space-between">
        <el-form-item label="排序" prop="order" class="margintop mb20">
          <el-input-number
            v-model="ruleForm.order"
            :min="1"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status" class="margintop mb20">
          <el-radio-group v-model="ruleForm.status">
            <el-radio value="1">正常</el-radio>
            <el-radio value="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="推荐" prop="recommend" class="margintop mb20">
          <el-radio-group
            v-model="ruleForm.recommend"
            @change="changeRadio(ruleForm.recommend)"
          >
            <el-radio :value="0">日常新闻</el-radio>
            <el-radio :value="1">热门关注</el-radio>
            <el-radio :value="2">横幅新闻</el-radio>
            <el-radio :value="3">推荐新闻</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-show="ruleForm.recommend == 1"
          class="margintop mb20"
          prop="icon"
        >
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            v-model="ruleForm.icon"
            style="width: 250px"
            placeholder="请选择"
            @change="changeSelection"
            ref="select"
          >
            <el-option
              v-for="item in iconsList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              class="select-option-item"
            >
              <img :src="item.url" style="height: 30px; margin-right: 10px" />
              <span>{{ item.label }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item style="padding-left: 70px" class="margintop mb20">
        <el-button
          :disabled="btnLoading"
          type="primary"
          style="width: 170px"
          class="height40"
          @click="submitForm(ruleFormRef)"
        >
          {{ btnLoading ? '保存中...' : '保存' }}
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { newsSave, lookNewsDetail } from '@/api/newsList/newsList';
const { proxy } = getCurrentInstance();
// 图标路径
const imgUrl = 'https://mcdn.chatgk.com/';

const id = ref('');
const btnLoading = ref(false);
const router = useRouter();
const route = useRoute();
const ruleFormRef = ref(null);
const id1 = 'hotNews';
const iconsList = [
  {
    url: imgUrl + 'icons/1.png',
    value: '1',
    label: '图标1',
  },
  {
    url: imgUrl + 'icons/2.png',
    value: '2',
    label: '图标2',
  },
  {
    url: imgUrl + 'icons/3.png',
    value: '3',
    label: '图标3',
  },
  {
    url: imgUrl + 'icons/4.png',
    value: '4',
    label: '图标4',
  },
  {
    url: imgUrl + 'icons/5.png',
    value: '5',
    label: '图标5',
  },
  {
    url: imgUrl + 'icons/6.png',
    value: '6',
    label: '图标6',
  },
  {
    url: imgUrl + 'icons/7.png',
    value: '7',
    label: '图标7',
  },
  {
    url: imgUrl + 'icons/8.png',
    value: '8',
    label: '图标8',
  },
  {
    url: imgUrl + 'icons/9.png',
    value: '9',
    label: '图标9',
  },
  {
    url: imgUrl + 'icons/10.png',
    value: '10',
    label: '图标10',
  },
];

// 在select框内设置图片
function changeSelection(val) {
  for (const v of iconsList) {
    if (v.value == val) {
      proxy.$refs.select.$el.children[0].children[0].children[0].setAttribute(
        'style',
        'background:url(' +
          v.url +
          ') no-repeat 10px;background-size: 30px 30px;color:#333;padding-left: 50px;'
      );
    }
  }
}

// 切换radio的时候清空select框
function changeRadio(val) {
  if (val == 1) {
    ruleForm.value.icon = '';
    rules.icon = [{ required: true, message: '请选择图标', trigger: 'change' }];
    proxy.$refs.select.$el.children[0].children[0].children[0].setAttribute(
      'style',
      ''
    );
  } else {
    delete rules.icon;
  }
}

const ruleForm = ref({
  source: '',
  recommend: '',
  type_name: '',
  title: '',
  content: '',
  image: '',
  image_url: '',
  keywords: '',
  view_total: '',
  year: '',
  status: '',
  order: null,
  icon: '',
});
const modelValueList = ref([]);
const rules = reactive({
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  source: [{ required: true, message: '请输入来源', trigger: 'blur' }],
  type_name: [{ required: true, message: '请选择类型', trigger: 'blur' }],
  keywords: [{ required: true, message: '请输入关键字', trigger: 'blur' }],
  // 评分组件只能用自定义校验规则
  content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  image_url: [{ required: true, message: '请上传图片', trigger: 'change' }],
  order: [{ required: true, message: '请选择排序', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
  recommend: [{ required: true, message: '请选择推荐', trigger: 'change' }],
});

const modelValue = (val) => {
  ruleForm.value.image_url = val; // 保存单张图片
};
function editorChange(val) {
  ruleForm.pcDescription = val;
}
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      // id存在为修改，不存在为新增
      if (id.value) {
        ruleForm.value.id = id.value;
        handleAddNewsSave();
      } else {
        handleAddNewsSave();
      }
    } else {
      return;
    }
  });
};
// 新增接口
const handleAddNewsSave = () => {
  btnLoading.value = true;
  delete ruleForm.value.update_time;
  if (ruleForm.value.recommend !== 1) {
    delete ruleForm.value.icon;
  } else {
    ruleForm.value.icon = parseInt(ruleForm.value.icon);
  }
  newsSave(ruleForm.value)
    .then((res) => {
      if (res.code == 20000) {
        proxy.$modal.msgSuccess(res.msg);
        btnLoading.value = false;
        router.push('/operation/consult');
      } else {
        // proxy.$modal.msgError(res.msg);
        btnLoading.value = false;
      }
    })
    .catch(() => {
      btnLoading.value = false;
    });
};
function backChange() {
  router.push('/operation/consult');
}
const handleLookNewsDetail = () => {
  lookNewsDetail({ id: id.value }).then((res) => {
    if (res.code == 20000) {
      if (res.data.image_url) {
        modelValueList.value = res.data.image_url.split(',');
      } else {
        modelValueList.value = '';
      }
      ruleForm.value = res.data;
      if (res.data.icon) {
        changeSelection(res.data.icon);
        ruleForm.value.icon = '图标' + res.data.icon;
      }
    }
  });
};
id.value = route.query.id;
if (id.value) {
  handleLookNewsDetail();
}
</script>
<style lang="scss" scoped>
:deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

:deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;

    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}

.select-option-item {
  display: flex;
  flex-direction: row;
}
</style>
